<template>
  <div>
    <el-tabs type="border-card" style="height:700px">
      <el-tab-pane label="矛盾纠纷">
        <el-table :data="List1" border>
          <el-table-column type="index" width="80"></el-table-column>
          <el-table-column prop="eventName" label="事件名称" align="center"></el-table-column>
          <el-table-column prop="eventPlace" label="发生地点" align="center"></el-table-column>
          <el-table-column prop="evenScaleTypeName" label="事件规模" align="center"></el-table-column>
          <el-table-column prop="eventTypeName" label="事件类型" align="center"></el-table-column>
          <el-table-column prop="eventDate" label="发生时间" align="center"></el-table-column>
          <el-table-column prop="eventStatusName" label="事件处理状态" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button type="text" @click="watchDispute(scope.row.disputeEventID)">查看详情</el-button>
              <el-button type="text" v-if="isSuper" style="color:red" @click="deleteDisputeEvent(scope.row.disputeEventID)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="float:right;margin-top:120px;" layout="prev, pager, next" :total="totalInfo1" @current-change="handleCurrentChange1">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="社会治安">
        <el-table border :data="List2">
          <el-table-column type="index" width="80"></el-table-column>
          <el-table-column v-for="(v,k,i) in prop1" :key="i" :label="label1[i]" prop="" align="center">
            <template scope="scope">
              <span v-if="k==='sex'">
                {{scope.row[k]==1?'男':'女'}}
              </span>
              <span v-else-if="k=='ssEventKind'">
                {{scope.row[k]==1?'一般事件':'重大事件'}}
              </span>
              <span v-else>
                {{scope.row[k]}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button type="text" @click="socialInfo(scope.row.ssEventID)">查看详情</el-button>
              <el-button type="text" v-if="isSuper" style="color:red" @click="deleteSSEvent(scope.row.ssEventID)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="float:right;margin-top:120px;" layout="prev, pager, next" :total="totalInfo2" @current-change="handleCurrentChange2">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="交通事故">
        <el-table :data="List3" border>
          <el-table-column type="index" width="80"></el-table-column>
          <el-table-column v-for="(v,k,i) in prop2" :key="i" :label="label1[i]" align="center">
            <template scope="scope">
              <span v-if="k==='sex'">
                {{scope.row[k]==1?'男':'女'}}
              </span>
              <span v-else-if="k=='trafficAccidentKind'">
                {{scope.row[k]==1?'一般事件':'重大事件'}}
              </span>
              <span v-else>
                {{scope.row[k]}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button type="text" @click="trafficInfo(scope.row.trafficAccidentID)">查看详情</el-button>
              <el-button type="text" v-if="isSuper" style="color:red" @click="deleteTrafficAccident(scope.row.trafficAccidentID)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="float:right;margin-top:120px;" layout="prev, pager, next" :total="totalInfo3" @current-change="handleCurrentChange3">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="网格巡防">
        <el-table :data="List4" border>
          <el-table-column type="index" width="80"></el-table-column>
          <el-table-column v-for="(v,k,i) in prop3" :key="i" :label="label1[i]" align="center">
            <template scope="scope">
              <span v-if="k==='sex'">
                {{scope.row[k]==1?'男':'女'}}
              </span>
              <span v-else-if="k=='spEventKind'">
                {{getKind(scope.row[k])}}
              </span>
              <span v-else>
                {{scope.row[k]}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button type="text" @click="skyNetInfo(scope.row.spEventID)">查看详情</el-button>
              <el-button type="text" v-if="isSuper" style="color:red" @click="deletskeyNetInfo(scope.row.spEventID)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="float:right;margin-top:120px;" layout="prev, pager, next" :total="totalInfo4" @current-change="handleCurrentChange4">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="问题上报">
        <el-table :data="List5" border>
          <el-table-column type="index" width="80"></el-table-column>
          <el-table-column v-for="(v,k,i) in prop4" :key="i" :label="label1[i]" align="center">
            <template scope="scope">
              <span v-if="k==='sex'">
                {{scope.row[k]==1?'男':'女'}}
              </span>
              <span v-else-if="k=='eventKind'">
                {{getKind(scope.row[k])}}
              </span>
              <span v-else>
                {{scope.row[k]}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button type="text" @click="netGridEventInfo(scope.row.eventID)">查看详情</el-button>
              <el-button type="text" v-if="isSuper" style="color:red" @click="deleteNetGridEvent(scope.row.eventID)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="float:right;margin-top:120px;" layout="prev, pager, next" :total="totalInfo5" @current-change="handleCurrentChange5">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog top="5%" title="查看详情" :visible.sync="visible1">
      <infoa :id="id1"></infoa>
    </el-dialog>
    <el-dialog top="5%" title="查看详情" :visible.sync="visible2">
      <infob :id="id2"></infob>
    </el-dialog>
    <el-dialog top="5%" title="查看详情" :visible.sync="visible3">
      <infoc :id="id3"></infoc>
    </el-dialog>
    <el-dialog top="5%" title="查看详情" :visible.sync="visible4">
      <infod :id="id4"></infod>
    </el-dialog>
    <el-dialog top="5%" title="查看详情" :visible.sync="visible5">
      <infoe :id="id5"></infoe>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "../../api/netGridManage";
import infoa from "../contradictionManage/checkDetail";
import infob from "../publicSecurityManage/eventInfo";
import infoc from "../trafficManage/trafficEventInfo";
import infod from "../skynet/eventInfo";
import infoe from "../netManage/netEventInfo";

export default {
  components: {
    infoa: infoa,
    infob: infob,
    infoc: infoc,
    infod: infod,
    infoe: infoe
  },
  data() {
    return {
      visible1: false,
      id1: "",
      visible2: false,
      id2: "",
      visible3: false,
      id3: "",
      visible4: false,
      id4: "",
      visible5: false,
      id5: "",
      totalInfo1: 0,
      totalInfo2: 0,
      totalInfo3: 0,
      totalInfo4: 0,
      totalInfo5: 0,
      prop1: {
        ssEventName: "",
        ssEventKind: "", //               '事件性质，如1=一般事件；2=重大事件；等',
        ssEventTypeName: "", //          '事件类型，如杀人、放火、抢劫等',
        ssEventStatusTypeName: "", //     '当前事件处理的最新状态',
        ssEventStartDateTime: "",
        netGridName: "" //所属网格
      },
      label1: [
        "事件名称",
        "事件性质",
        "事件类型",
        "事件处理状态",
        "发生日期",
        "所属网格"
      ],
      prop2: {
        trafficAccidentName: "", //事故名称
        trafficAccidentKindName: "", //  int comment '交通事故性质，编码待定',
        trafficAccidentTypeName: "", //          '事件类型，如杀人、放火、抢劫等',
        trafficAccidentStatusTypeName: "", // char(2) comment '当前交通事故处理的最新状态',
        trafficAccidentStartDateTime: "",
        netGridName: "" //所属网格
      },
      prop4: {
        // eventID: "", //bigint not null auto_increment,
        eventName: "", //'事件名称',
        eventKind: "",
        eventTypeName: "", //'事件类型，如杀人、放火、抢劫等',
        eventStatusTypeName: "",
        eventStartDateTime: "",
        netGridName: ""
      },
      prop3: {
        // spEventID: "", //bigint not null auto_increment,
        spEventName: "", //'事件名称',
        spEventKind: "",
        spEventTypeName: "", //'事件类型，如杀人、放火、抢劫等',
        spEventStatusTypeName: "",
        spEventStartDateTime: "",
        netGridName: ""
      },
      List1: [],
      query1: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        isDC: 0
      },
      query2: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        isDC: 0
      },
      List2: [],
      query3: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        isDC: 0
      },
      List3: [],
      query4: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        isDC: 0
      },
      List4: [],
      query5: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        isDC: 0
      },
      List5: [],
      isSuper:false
    };
  },
  methods: {
    async deletskeyNetInfo(id) {
      this.$confirm("是否确认删除此事件", "是否继续", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await api.deleteSPEvent(id);
          if (res.data) {
            this.$message({
              message: "取消操作",
              type: "info"
            });
          }
          this.getSPEventForNetGrid();
        })
        .catch(() => {
          this.$message({
            message: "取消操作",
            type: "info"
          });
        });
    },
    async deleteDisputeEvent(id) {
      this.$confirm("是否确认删除此事件", "是否继续", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await api.deleteDisputeEvent(id);
          if (res.data) {
            this.$message({
              message: "删除成功！",
              type: "success"
            });
          }
          this.getDisputeEventForNetGrid();
        })
        .catch(() => {
          this.$message({
            message: "取消操作",
            type: "info"
          });
        });
    },
    async deleteNetGridEvent(id) {
      this.$confirm("是否确认删除此事件", "是否继续", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await api.deleteNetGridEvent(id);
          if (res.data) {
            this.$message({
              message: "删除成功！",
              type: "success"
            });
          }
          this.getWTInfo();
        })
        .catch(() => {
          this.$message({
            message: "取消操作",
            type: "info"
          });
        });
    },
    async deleteSSEvent(id) {
      this.$confirm("是否确认删除此事件", "是否继续", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await api.deleteSSEvent(id);
          if (res.data) {
            this.$message({
              message: "删除成功！",
              type: "success"
            });
          }
          this.getSSEventForNetGrid();
        })
        .catch(() => {
          this.$message({
            message: "取消操作",
            type: "info"
          });
        });
    },
    async deleteTrafficAccident(id) {
      this.$confirm("是否确认删除此事件", "是否继续", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await api.deleteTrafficAccident(id);
          if (res.data) {
            this.$message({
              message: "删除成功！",
              type: "success"
            });
          }
          this.getTrafficAccidentForNetGrid();
        })
        .catch(() => {
          this.$message({
            message: "取消操作",
            type: "text"
          });
        });
    },
    getKind(id) {
      switch (id) {
        case 1:
          return "一般事件";
        case 2:
          return "重大事件";
        case 3:
          return "简单事件";
      }
    },
    getStatus1(obj) {
      if (obj.ssEventStatusTypeName !== null) {
        return obj.ssEventStatusTypeName;
      } else {
        return "事件待上报!";
      }
    },
    getStatus2(obj) {
      if (obj.trafficAccidentTypeName !== null) {
        return obj.trafficAccidentTypeName;
      } else {
        return "事件待上报!";
      }
    },
    getStatus3(obj) {
      if (obj.spEventStatusTypeName == null && obj.spEventKind == 3) {
        return "事件待处理";
      } else if (obj.spEventStatusTypeName != null && obj.spEventKind == 3) {
        return obj.spEventStatusTypeName;
      } else if (obj.spEventStatusTypeName != null) {
        return obj.spEventStatusTypeName;
      } else {
        return "事件待上报!";
      }
    },
    getDisputeEventForNetGrid() {
      api.getDisputeEventForNetGrid(this.query1).then(res => {
        this.List1 = res.data.disputeEvents;
        this.totalInfo1 = res.data.page.totalCount;
      });
    },
    getSSEventForNetGrid() {
      api.getSSEventForNetGrid(this.query2).then(res => {
        this.List2 = res.data.vos;
        this.totalInfo2 = res.data.page.totalCount;
      });
    },
    getTrafficAccidentForNetGrid() {
      api.getTrafficAccidentForNetGrid(this.query3).then(res => {
        this.List3 = res.data.vos;
        this.totalInfo3 = res.data.page.totalCount;
      });
    },
    getSPEventForNetGrid() {
      api.getSPEventForNetGrid(this.query4).then(res => {
        this.List4 = res.data.list;
        this.totalInfo4 = res.data.page.totalCount;
      });
    },
    getWTInfo() {
      api.getNetGridEventForNetGrid(this.query5).then(res => {
        this.List5 = res.data.vos;
        this.totalInfo5 = res.data.page.totalCount;
      });
    },
    handleCurrentChange1(val) {
      this.query1.page = val;
      this.getDisputeEventForNetGrid();
    },
    handleCurrentChange2(val) {
      this.query2.page = val;
      this.getSSEventForNetGrid();
    },
    handleCurrentChange3(val) {
      this.query3.page = val;
      this.getTrafficAccidentForNetGrid();
    },
    handleCurrentChange4(val) {
      this.query4.page = val;
      this.getSPEventForNetGrid();
    },
    handleCurrentChange5(val) {
      this.query5.page = val;
      this.getWTInfo();
    },
    watchDispute(id) {
      this.id1 = id;
      this.visible1 = true;
    },
    trafficInfo(id) {
      this.id3 = id;
      this.visible3 = true;
    },
    socialInfo(id) {
      this.id2 = id;
      this.visible2 = true;
    },
    skyNetInfo(id) {
      this.id4 = id;
      this.visible4 = true;
    },
    netGridEventInfo(id) {
      this.id5 = id;
      this.visible5 = true;
    }
  },
  mounted() {
    const { dept,userRole } = this.$store.getters.user;
    if(userRole == '超级管理员'){
      this.isSuper = true;
    }
    if (dept == "督查") {
      this.query1.isDC = 1;
      this.query2.isDC = 1;
      this.query3.isDC = 1;
      this.query4.isDC = 1;
      this.query5.isDC = 1;
    }
    this.getDisputeEventForNetGrid();
    this.getSSEventForNetGrid();
    this.getTrafficAccidentForNetGrid();
    this.getSPEventForNetGrid();
    this.getWTInfo();
  }
};
</script>
